$(function () {

    var data = {
        bigImgs: [
            "image/datejing/428_428_BD1B940E6F1FD1CB2BE7C518A47BAD881C9B1EACC85A12A5mp.png",
            "image/datejing/428_428_A6394E63A0D3E2A7A58AEE6561E4067FCA1AF3A9479A5E93.png",
            "image/datejing/428_428_14C23A252DE35FBEB1C7C68C8108B10486FE1CF27FA8055C.png",
            "image/datejing/428_428_6178223603594B05570F53F1B1786E9E73CAA7D9B7462786.png",
            "image/datejing/428_428_ACD96A4B02364E8F698BEE6267F651443B0BBA3B270E76B9.png",
        ],
        middleImgs: [
            "image/datejing/800_800_BD1B940E6F1FD1CB2BE7C518A47BAD881C9B1EACC85A12A5mp.png",
            "image/datejing/800_800_A6394E63A0D3E2A7A58AEE6561E4067FCA1AF3A9479A5E93.png",
            "image/datejing/800_800_14C23A252DE35FBEB1C7C68C8108B10486FE1CF27FA8055C.png",
            "image/datejing/800_800_6178223603594B05570F53F1B1786E9E73CAA7D9B7462786.png",
            "image/datejing/800_800_ACD96A4B02364E8F698BEE6267F651443B0BBA3B270E76B9.png",
        ],
        smallImgs: [
            "image/datejing/78_78_BD1B940E6F1FD1CB2BE7C518A47BAD881C9B1EACC85A12A5mp.png",
            "image/datejing/78_78_A6394E63A0D3E2A7A58AEE6561E4067FCA1AF3A9479A5E93.png",
            "image/datejing/78_78_14C23A252DE35FBEB1C7C68C8108B10486FE1CF27FA8055C.png",
            "image/datejing/78_78_6178223603594B05570F53F1B1786E9E73CAA7D9B7462786.png",
            "image/datejing/78_78_ACD96A4B02364E8F698BEE6267F651443B0BBA3B270E76B9.png",
        ],
    }

    class Loupe {
        constructor(settings = {}) {
            this.$el = $(settings.el);
            this.$imgData = settings.data;
            this.$middleImg = this.$el.children('#middleimg');
            this.$middleArea = this.$middleImg.children('#middleArea');
            this.$small = this.$el.children('.thumbs');
            this.$bigArea = this.$el.children('#bigArea');
            this.$bigImg = this.$bigArea.children('#bigImg');
            this.init();
            this.mouseHandler();
        }
        init() {
            // 创建小图
            let { smallImgs, middleImgs, bigImgs } = this.$imgData;
            [...smallImgs].forEach((item,index) => {
                $(`<li><img src="${item}" data-index="${index}" /></li>`).appendTo(this.$small.find('ul'));
            });
            this.$small.find('ul').children('li:first').addClass('current');
            // 中图,大图默认显示第一张
            this.$middleImg.children('img').attr('src', middleImgs[0])
            this.$bigImg.attr('src', bigImgs[0]);
            // 调整中区域的大小
            this.$middleArea.css({
                width: this.$middleImg.width() / this.$bigImg.width() * this.$bigArea.width(),
                height: this.$middleImg.height() / this.$bigImg.height() * this.$bigArea.height()
            })
        }
        mouseHandler() {
            this.$middleImg.on('mouseenter', () => {
                // 显示中区域和大区域
                this.$middleArea.css('display', 'block');
                this.$bigArea.css('display', 'block');
            }).on('mousemove', e => {
                let disX = e.pageX - this.$middleImg.offset().left - this.$middleArea.width() / 2;
                let disY = e.pageY - this.$middleImg.offset().top - this.$middleArea.height() / 2;
                if (disX <= 0) {
                    disX = 0;
                }
                if (disX > this.$middleImg.width() - this.$middleArea.width()) {
                    disX = this.$middleImg.width() - this.$middleArea.width()
                }
                if (disY <= 0) {
                    disY = 0;
                }
                if (disY > this.$middleImg.height() - this.$middleArea.height()) {
                    disY = this.$middleImg.height() - this.$middleArea.height()
                }
                this.$middleArea.css({
                    left: disX,
                    top: disY
                });
                // 计算比例
                let scale = this.$bigImg.width() / this.$middleImg.width();
                this.$bigImg.css({
                    left: disX * -scale,
                    top: disY * -scale
                })
            }).on('mouseleave', () => {
                // 隐藏中区域和大区域
                this.$middleArea.css('display', 'none');
                this.$bigArea.css('display', 'none');
            });

            // 小图悬浮选中
            this.$small.on('mouseover','img',_.debounce(e=>{
                let {middleImgs,bigImgs} = this.$imgData;
                let index = $(e.target).data('index');
                $(e.target).parent('li').addClass('current').siblings().removeClass('current');
                this.$middleImg.find('img').attr('src',middleImgs[index]);
                this.$bigImg.attr('src',bigImgs[index]);
            },100))
        }
    }

    new Loupe({
        el:'.img-magnif',
        data
    })
})